<template>
  <div >
    <!--查询-->
    <nf-find :moduleId="moduleId" />
    <!--按钮-->
    <nf-button
      :moduleId="moduleId"
    />
    <!--列表-->
    <nf-el-grid
      v-tabledrag="tableInfo"
      v-bind="girdMeta"
      :data-list="ds.dataListSource"
      :selection="ds.choice"
    />
    <!--分页-->
    <nf-pager/>
    <el-button type="" @click="reload">更新meta666</el-button>
    <el-button type="" @click="getTdWidth">获取td的宽度</el-button>
    <el-button type="" @click="gridMetaOut">导出</el-button>
    <grid-out
      :gridOutInfo="gridOutInfo"
      :moduleId="moduleId"
    >
    </grid-out>
  </div>
</template>

<script>
  import { defineProps, nextTick, onMounted, reactive, watch } from 'vue'
  // 查询组件
  import nfFind from './find.vue'
  // 按钮组件
  import nfButton from './button.vue'
  // 列表控件
  import nfElGrid from '/ctrl/nf-el-grid/nf-el-grid-list.vue'
  // 分页组件
  import nfPager from './pager.vue'

  // 新的列表页面的管理类
  // import dataListManage from '../../controller/state-list.js'
  import { regList } from '../../controller/data-list-controller.js'

  // 轻量级状态
  import { state } from 'nf-state'

  // 导出gird 的meta
  import gridOut from '../plat-visual/drawer/grid-out.vue'

</script>

<script setup>

  // 属性：模块ID
  const props = defineProps({
    moduleId: [Number, String],
    dataId: [Number, String],
    openModuleId: {
      type: Number,
      default: -2
    }
  })

  // 列表用的 meta
  const girdMeta = state.projectMeta.module[props.moduleId].grid
  girdMeta.reload = true

  // 注册列表状态
  const ds = regList(props.moduleId)
  // 设置快捷键
  ds.hotkey()

  // 主从表，从表加载列表数据
  watch(() => props.dataId, () => {
          if (typeof props.dataId !== 'undefined') {
            ds.fixedQuery[girdMeta.foreignIdName] = [401, props.dataId]
            ds.reloadFirstPager()
            console.log('ssss', ds.query)
          }
        },
        { immediate: true }
  )

  // 重新加载meta的json文件
  const reload = () => {
  }

  // table 的拖拽功能
  const tableInfo = {
    meta: girdMeta,
    metaKind: 'grid',
    getTdwidth: () => {
      console.log('原始的获取td的函数')
    }
  }

  // 导出
  const gridOutInfo = reactive({
    isShow: false
  })

  const gridMetaOut = () => {
    gridOutInfo.isShow = true
  }
</script>
